<template>
  <div
    class="cg-page"
    :style="{
      marginTop: top,
      'margin-left': margins,
      'margin-right': margins,
    }"
  >
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor
      }"
    />
    <div class="cg-list">
      <div>
        <div class="list-item" style="background-color: #f6f9ff">
          <div class="item-img">
            <img src="../../images/base/mrdt.png" alt="" />
          </div>
          <div class="item-right">
            <section class="top-text">
              <span>{{ dailyInfo.title || '每日答题' }}</span>
            </section>
            <section class="bottom-text">
              <span>{{ dailyInfo.subtitle || '标语' }}</span>
            </section>
          </div>
          <div class="item-btn">
            <button>进入答题</button>
          </div>
        </div>
        <div class="list-item" style="background-color: #f2fffa">
          <div class="item-img">
            <img src="../../images/base/zxdt.png" alt="" />
          </div>
          <div class="item-right">
            <section class="top-text">
              <span>{{ rankInfo.title || '答题活动' }}</span>
            </section>
            <section class="bottom-text">
              <span>{{ rankInfo.subtitle || '标语' }}</span>
            </section>
          </div>
          <div class="item-btn">
            <button>进入答题</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixins from './../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
export default {
  components: { CellTitle },
  mixins: [mixins],
  name: 'RushTrain',
  props: {
    option: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // items: [
      //   {
      //     img: require('../images/zhongjian/mrdt.png'),
      //     title: '每日答题',
      //     desc: getConfigVal('APP_HOME_EVERY_RUSH_DESC') || '安全知识闯关答题',
      //     color: '#F6F9FF',
      //     url: '/rush/index',
      //     id: 'APP_HOME_EVERY_CONFIRM'
      //   },
      //   /* {
      //     img: require('../images/zhongjian/mzdt.png'),
      //     title: '每周答题',
      //     desc: '战胜疫情，充满信心',
      //     color: '#FFF7EE'
      //   },*/
      //   {
      //     img: require('../images/zhongjian/zxdt.png'),
      //     title: '专项答题',
      //     desc: getConfigVal('APP_HOME_BREAK_THROUGH_DESC') || '做综合素质中建人',
      //     color: '#F2FFFA',
      //     url: '/special/list',
      //     id: 'APP_HOME_BREAK_THROUGH_AVTIVITY'
      //   }
      // ],
      dailyInfo: {},
      rankInfo: {}
    }
  },
  created() {
    if (this.isInitData) {
      this.initData()
    }
  },
  methods: {
    setData(result) {
      this.dailyInfo = result.dataInfo.data.DTLX_MRLX
      this.rankInfo = result.dataInfo.data.DTLX_DTHD
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";
.cg-page {
  // padding-top: rem(20);
  border-radius: rem(16);
  .cg-list {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0 0 rem(16) rem(16);
    .list-item {
      position: relative;
      margin: rem(20);
      height: rem(190);
      display: flex;
      align-items: center;
      border-radius: rem(20);
      .item-img {
        margin-left: rem(10);
        height: rem(156);
        width: rem(156);
        img {
          height: 100%;
          width: 100%;
        }
      }
      .item-right {
        margin-left: rem(16);
        .top-text {
          font-size: rem(30);
          font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
          font-weight: 600;
          text-align: left;
          color: #212121;
        }
        .bottom-text {
          ont-size: rem(24);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #a8a8a9;
          margin-top: rem(23);
        }
      }
      .item-btn {
        position: absolute;
        right: rem(12);
        button {
          width: rem(140);
          height: rem(56);
          @include bg-color($mainColor);
          border-radius: rem(28);
          border: none;
          color: #fff;
        }
      }
    }
  }
}
</style>
